<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-input
        v-model="listQuery.accountName"
        placeholder="机构名称搜索"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.planName"
        placeholder="计划名搜索"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-time-picker
        is-range
        v-model="times"
        class="filter-item"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        style="width: 250px;"
        value-format="HH:mm:ss"
      /> -->
      <el-select
        v-model="listQuery.planStatus"
        clearable
        placeholder="状态"
        style="width: 150px;"
        class="filter-item"
      >
        <!-- <el-option :value="0" label="全部">全部</el-option> -->
        <el-option :value="1" label="启用">启用</el-option>
        <el-option :value="0" label="未启用">未启用</el-option>
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>

      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        新增
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="机构名称" class-name="status-col" min-width="150">
        <template slot-scope="{ row }">
          {{ row.accountName }}
        </template>
      </el-table-column>
      <el-table-column label="计划名称" align="center" min-width="100">
        <template slot-scope="{ row }">
          <span>{{ row.planName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="今日投放数量" min-width="120" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.todayCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已投放预算数量" min-width="120" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.totalCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="启用状态"
        align="center"
        min-width="120"
        class-name="small-padding"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.planStatus"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            align="center"
            @change="changePlanStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="360">
        <template slot-scope="{ row }">
          <el-button type="info" size="mini" @click="filterConfiguration(row)">
            过滤器配置
          </el-button>
          <el-button type="info" size="mini" @click="cityConfigure(row)">
            城市配置
          </el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button type="warning" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.currentPage"
      :limit.sync="listQuery.pageSize"
      @pagination="getadRiskList"
    />
    <el-dialog
      :visible.sync="dialogVisible"
      :title="AddOrUpdateText[dialogStatus] + '广告计划'"
    >
      <el-form ref="planData" :model="planData" label-width="100px">
        <el-form-item label="机构名称">
          <el-select
            v-model="planData.accountName"
            clearable
            placeholder="请选择"
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in selectArr"
              :key="index"
              :value="item.nickName"
              :label="item.nickName"
              @click.native="getSelect(item)"
            >
              {{ item.nickName }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划名称">
          <el-input v-model="planData.planName"></el-input>
        </el-form-item>
        <el-form-item label="预算数量">
          <el-input v-model="planData.planLimit" type="number"></el-input>
        </el-form-item>
        <el-form-item label="曝光">
          <el-input v-model="planData.planPrice" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 0 ? createData() : updateData()"
        >
          确认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible2" title="过滤器配置">
      <el-form
        :model="glData"
        ref="ruleForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="满足条件" label-width="130px" prop="matchMode">
          <el-radio-group v-model="glData.matchMode" size="medium">
            <el-radio border :label="0">满足所选全部</el-radio>
            <el-radio border :label="1">满足所选其一</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否开启匹配筛选" label-width="130px">
          <el-switch
            v-model="glData.matchFlag"
            active-text="开"
            inactive-text="关"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            align="center"
            @change="changeMatchFlag()"
          />
        </el-form-item>
        <div class="mateBox" v-show="matchFlagVisible">
          <el-form-item label="车">
            <el-radio-group v-model="glData.carFlag" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="房">
            <el-radio-group v-model="glData.houseFlag" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="社保">
            <el-radio-group v-model="glData.insuranceFlag" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="保单">
            <el-radio-group v-model="glData.guaranteeFlag" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="公积金">
            <el-radio-group v-model="glData.fundFlag" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="无逾期">
            <el-radio-group v-model="glData.noOver" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="个体户/企业主">
            <el-radio-group v-model="glData.businessFlag" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="白条5000以上">
            <el-radio-group v-model="glData.whiteTip" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="花呗5000以上">
            <el-radio-group v-model="glData.huaBei" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户年龄">
            <el-input
              placeholder="最小年龄"
              type="number"
              style="width:110px"
              v-model="glData.lowAge"
            ></el-input
            >&nbsp;&nbsp; 到&nbsp;&nbsp;
            <el-input
              type="number"
              placeholder="最大年龄"
              style="width:110px"
              v-model="glData.highAge"
            ></el-input>
          </el-form-item>
          <el-form-item label="贷款金额">
            <el-radio-group v-model="glData.loanMoney" size="medium">
              <el-radio border :label="0">无</el-radio>
              <el-radio border :label="1">5万</el-radio>
              <el-radio border :label="2">10万</el-radio>
              <el-radio border :label="3">20万</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="芝麻分">
            <el-radio-group v-model="glData.sesameRank" size="medium">
              <el-radio border :label="0">无</el-radio>
              <el-radio border :label="2">600分以下</el-radio>
              <el-radio border :label="3">600~649</el-radio>
              <el-radio border :label="4">650~699</el-radio>
              <el-radio border :label="5">700以上</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="是否开启风控筛选" label-width="130px">
          <el-switch
            v-model="glData.riskFlag"
            active-text="开"
            inactive-text="关"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            align="center"
            @change="changeRiskFlag()"
          />
        </el-form-item>
        <div class="mateBox" v-show="riskFlagVisible">
          <el-form-item label="当前无逾期">
            <el-radio-group v-model="glData.xyCurrentOverdueFlag" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="无网白">
            <el-radio-group v-model="glData.xyWbFlag" size="medium">
              <el-radio border :label="0">不限</el-radio>
              <el-radio border :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="行为分">
            <el-input
              placeholder=""
              type="number"
              style="width:150px"
              v-model="glData.behavior"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="贷款笔数">
            <el-input
              placeholder=""
              type="number"
              style="width:150px"
              v-model="glData.loansCount"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="履约次数">
            <el-input
              placeholder=""
              type="number"
              style="width:150px"
              v-model="glData.agreeCount"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="正常还款比例">
            <el-input
              placeholder=""
              type="number"
              style="width:150px"
              v-model="glData.norRatio"
            ></el-input>
          </el-form-item> -->

          <el-form-item
            label="正常还款订单比例"
            prop="xyHkRatio"
            label-width="140px"
          >
            <el-input
              placeholder=""
              type="number"
              style="width:150px"
              v-model="glData.xyHkRatio"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="六个月M0次数" label-width="130px">
            <el-input
              placeholder=""
              type="number"
              style="width:150px"
              v-model="glData.sixM0"
            ></el-input>
          </el-form-item> -->
          <el-form-item
            label="近3个月贷款笔数几笔以上"
            prop="xyDk3"
            label-width="200px"
          >
            <el-input
              placeholder=""
              type="number"
              style="width:150px"
              v-model="glData.xyDk3"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="近6个月贷款笔数几笔以上"
            prop="xyDk6"
            label-width="200px"
          >
            <el-input
              placeholder=""
              type="number"
              style="width:150px"
              v-model="glData.xyDk6"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="近12个月贷款笔数几笔以上"
            prop="xyDk12"
            label-width="200px"
          >
            <el-input
              placeholder=""
              type="number"
              style="width:150px"
              v-model="glData.xyDk12"
            ></el-input>
          </el-form-item>
          <el-form-item label="近多少个月无逾期" label-width="130px">
            <el-radio-group v-model="glData.xyNotOverdue" size="medium">
              <el-radio border :label="1">6个月</el-radio>
              <el-radio border :label="2">12个月</el-radio>
              <el-radio border :label="3">24个月</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="近期有网贷履约记录" label-width="140px">
            <el-radio-group v-model="glData.xyLvRecord" size="medium">
              <el-radio border :label="1">1个月</el-radio>
              <el-radio border :label="2">3个月</el-radio>
              <el-radio border :label="3">6个月</el-radio>
              <el-radio border :label="4">24个月</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">
          取消
        </el-button>
        <el-button type="primary" @click="filterSubmit()">
          确认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible3" title="城市配置">
      <div>
        <div>
          未开通城市：
          <el-input
            v-model="zdNationalCityDTO.provinceName"
            clearable
            size="small"
            placeholder="输入省名称搜索"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery"
          />
          <el-input
            v-model="zdNationalCityDTO.cityName"
            clearable
            size="small"
            placeholder="输入城市名称搜索"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery"
          />
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="toQuery"
            >搜索</el-button
          >
          <!-- <el-button type="primary" icon="el-icon-warning-outline" size="small" @click="shieldBatch()">一键屏蔽</el-button> -->
          <!-- <el-button
            type="primary"
            icon="el-icon-warning-outline"
            size="small"
            @click="open()"
            >一键屏蔽</el-button
          > -->
        </div>

        <!--表格渲染-->
        <el-table
          ref="table"
          v-loading="loading"
          :data="allCity"
          style="width: 100%;"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="200" />
          <el-table-column prop="provinceCode" label="省编码" />
          <el-table-column prop="provinceName" label="省" />
          <el-table-column prop="cityCode" label="城市编码" />
          <el-table-column prop="cityName" label="城市" />
          <!--   编辑与删除   -->
          <el-table-column
            label="操作"
            width="130px"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                style="margin-left: 3px"
                type="text"
                size="mini"
                @click="addPrice(scope.row)"
                >开通</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total1 > 0"
          :total="total1"
          :page.sync="zdNationalCityDTO.current"
          :limit.sync="zdNationalCityDTO.size"
          @pagination="toQuery"
        />
      </div>
      <div class="head-container">
        <div class="app2">
          已开通城市：
          <el-input
            v-model="zdAdvertisingPlanDTO.provinceName"
            clearable
            size="small"
            placeholder="输入省份名称搜索"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery2"
          />
          <el-input
            v-model="zdAdvertisingPlanDTO.cityName"
            clearable
            size="small"
            placeholder="输入城市名称搜索"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery2"
          />
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="toQuery2"
            >搜索</el-button
          >
        </div>
        <!--表格渲染-->
        <el-table
          ref="table"
          v-loading="loading2"
          :data="citys"
          style="width: 100%;"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="cityCode" label="城市代码" />
          <el-table-column prop="provinceName" label="省份名称" />
          <el-table-column prop="cityName" label="城市名称" />
          <!-- <el-table-column prop="price" label="单价" /> -->
          <el-table-column prop="category" label="类型" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.status == 1">屏蔽</el-tag>
              <el-tag v-else>开通</el-tag>
            </template>
          </el-table-column>
          <!--   编辑与删除   -->
          <el-table-column
            label="操作"
            width="130px"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <!-- <el-button style="margin-left: 3px" type="text" size="mini" @click="delProduct(scope.row)">编辑</el-button> -->
              <el-button
                style="margin-left: 3px"
                type="text"
                size="mini"
                @click="delProduct(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
      </div>
      <pagination
        v-show="total2 > 0"
        :total="total2"
        :page.sync="zdAdvertisingPlanDTO.currentPage"
        :limit.sync="zdAdvertisingPlanDTO.pageSize"
        @pagination="toQuery2"
      />
    </el-dialog>
  </div>
</template>

<script>
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
import {
  getadRiskList,
  getList,
  changeAdPlan,
  deleteAdPlan,
  deleteAdPlanCity,
  getAdFilter,
  getAdListNoOpt,
  findAllCity,
  getAdListOpt,
  addAdPlan,
  addAdPlanCity,
  saveUpdateFilter,
  updateAdPlan
} from '@/api/advertising';
export default {
  name: 'Phonelist',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      cityCount: 1,
      price: '',
      tableData: [],
      total: 0,
      total1: 0,
      total2: 0,
      tableKey: 0,
      listQuery: {
        accountName: '',
        planName: '',
        planStatus: '',
        currentPage: 1,
        pageSize: 10
      },
      times: null,
      selectArr: '',
      planData: {
        accountName: '',
        accountId: '',
        planName: '',
        planLimit: '',
        planPrice: '',
        planStatus: 1,
        deleteFlag: 1,
        id: null,
        topFlag: 0
      },
      planData2: {
        id: 0,
        planStatus: 0
      },
      AddOrUpdateText: ['新建', '编辑'],
      dialogStatus: 0,
      matchFlagVisible: true,
      riskFlagVisible: true,
      glData: {
        id: null,
        planId: null,
        sesameRank: 0,
        loanMoney: 0,
        lowAge: null,
        highAge: null,
        carFlag: null,
        houseFlag: null,
        fundFlag: null,
        insuranceFlag: null,
        guaranteeFlag: null,
        businessFlag: null,
        whiteTip: null,
        huaBei: null,
        noOver: null,
        matchMode: null,
        riskFlag: 1,
        matchFlag: 1,
        xyCurrentOverdueFlag: null,
        xyWbFlag: null,
        xyLvRecord: null,
        xyDk3: 0,
        xyDk6: 0,
        xyDk12: 0,
        xyHkRatio: 0,
        xyNotOverdue: null,
        behavior: null,
        norRatio: null,
        loansCount: null,
        agreeCount: null,
        sixM0: null
      },
      tableLoading: false,
      listLoading: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      listQuery1: {
        avatar: '',
        current: 1,
        nickName: '',
        password: '',
        phonenumber: '',
        remark: '',
        size: 999,
        state: '',
        userName: ''
      },
      zdAdvertisingPlanDTO: {
        currentPage: 1,
        pageSize: 10,
        planId: '',
        provinceName: '',
        cityName: ''
      },
      zdNationalCityDTO: {
        planId: 0,
        current: 1,
        size: 10,
        provinceName: '',
        cityName: ''
      },
      cityData: {},
      allCity: [],
      citys: [],
      multipleIds: [],
      allId: '',
      rules: {
        xyHkRatio: [
          {
            required: true,
            message: '请填写正常还款订单比例',
            trigger: 'blur'
          }
        ],
        xyDk3: [
          {
            required: true,
            message: '请填写近3个月贷款笔数',
            trigger: 'blur'
          }
        ],
        xyDk6: [
          {
            required: true,
            message: '请填写近6个月贷款笔数',
            trigger: 'blur'
          }
        ],
        xyDk12: [
          {
            required: true,
            message: '请填写近12个月贷款笔数',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  created() {
    this.getadRiskList(this.listQuery);
  },
  methods: {
    // 获取用户列表
    async getadRiskList(listQuery) {
      const res = await getadRiskList(this.listQuery);
      res.data.data.list.forEach(element => {
        element.limitSwitch = element.enableStatus == 0;
        element.dStatus = element.displayStatus == 0;
      });
      this.tableData = res.data.data.list;
      this.total = res.data.data.count;
    },
    changeMatchFlag(e) {
      this.matchFlagVisible = this.glData.matchFlag === 1 ? true : false;
    },
    changeRiskFlag(e) {
      this.riskFlagVisible = this.glData.riskFlag === 1 ? true : false;
    },
    changePlanStatus(row) {
      this.planData2.id = row.id;
      this.planData2.planStatus = row.planStatus;
      changeAdPlan(this.planData2).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '更新状态成功',
            type: 'success',
            duration: 2000
          });
          this.getadRiskList(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: '更新失败',
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    async cityConfigure(row) {
      this.zdNationalCityDTO.provinceName = '';
      this.zdNationalCityDTO.cityName = '';
      this.zdAdvertisingPlanDTO.provinceName = '';
      this.zdAdvertisingPlanDTO.cityName = '';
      this.dialogVisible3 = true;
      this.zdNationalCityDTO.planId = row.id;
      const res = await findAllCity(this.zdNationalCityDTO);
      this.allCity = res.data.data.records;
      this.zdAdvertisingPlanDTO.planId = row.id;
      this.total1 = res.data.data.total;
      const res1 = await getAdListOpt(this.zdAdvertisingPlanDTO);
      this.citys = res1.data.data.records;
      this.total2 = res1.data.data.total;
    },
    delProduct(data) {
      deleteAdPlanCity({ id: data.id })
        .then(res => {
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          });
          this.toQuery();
          this.toQuery2();
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    toQuery() {
      findAllCity(this.zdNationalCityDTO)
        .then(res => {
          this.allCity = res.data.data.records;
          this.total1 = res.data.data.total;
        })
        .catch(() => {
          //
        });
    },
    toQuery2() {
      getAdListOpt(this.zdAdvertisingPlanDTO)
        .then(res => {
          this.citys = res.data.data.records;
          this.total2 = res.data.data.total;
        })
        .catch(() => {
          //
        });
    },
    addPrice(data) {
      const dataForm = {
        planId: this.zdAdvertisingPlanDTO.planId,
        provinceName: data.provinceName,
        provinceCode: data.provinceCode,
        cityName: data.cityName,
        cityCode: data.cityCode,
        category: false,
        openStatus: 1
      };
      this.cityData = dataForm;
      addAdPlanCity(this.cityData)
        .then(res => {
          this.$notify({
            title: '添加成功',
            type: 'success',
            duration: 2500
          });
          this.toQuery();
          this.toQuery2();
        })
        .catch(err => {});
    },
    filterConfiguration(row) {
      for (const key in this.glData) {
        if (
          [
            'sesameRank',
            'loanMoney',
            'xyHkRatio',
            'xyDk3',
            'xyDk6',
            'xyDk12'
          ].includes(key)
        ) {
          this.glData[key] = 0;
        } else if (['riskFlag', 'matchFlag'].includes(key)) {
          this.glData[key] = 1;
        } else {
          this.glData[key] = null;
        }
      }
      this.glData.planId = row.id;
      getAdFilter({ planId: row.id })
        .then(res => {
          if (res.data.data !== null) {
            this.glData = res.data.data;
          }
          this.dialogVisible2 = true;
        })
        .catch(err => {
          console.log(err);
        });
    },
    filterSubmit() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          saveUpdateFilter(this.glData).then(res => {
            if (res.data.code === 200) {
              this.$notify({
                title: 'Success',
                message: '新增成功',
                type: 'success',
                duration: 2000
              });
              this.getadRiskList(this.listQuery);
            } else {
              this.$notify({
                title: 'fail',
                message: res.data.msg,
                type: 'fail',
                duration: 2000
              });
            }
            this.dialogVisible2 = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getSelect(val) {
      this.planData.accountId = val.userId;
      this.planData.accountName = val.nickName;
    },
    handleUpdate(row) {
      this.dialogStatus = 1;
      this.dialogVisible = true;
      getList(this.listQuery1).then(res => {
        if (res.data.code === 200) {
          this.selectArr = res.data.data.records;
        }
      });
      this.planData.accountName = row.accountName;
      this.planData.planName = row.planName;
      this.planData.planPrice = row.planPrice;
      this.planData.planLimit = row.planLimit;
      this.planData.id = row.id;
    },
    handleCreate() {
      this.dialogStatus = 0;
      this.dialogVisible = true;
      getList(this.listQuery1).then(res => {
        if (res.data.code === 200) {
          this.selectArr = res.data.data.records;
        } else {
          this.$notify({
            title: '业务提示',
            message: res.data.msg,
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    cancel() {
      this.dialogVisible = false;
      this.resetPlanData();
    },
    createData() {
      addAdPlan(this.planData).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '新增成功',
            type: 'success',
            duration: 2000
          });
          this.getadRiskList(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: res.data.msg,
            type: 'fail',
            duration: 2000
          });
        }
        this.resetPlanData();
        this.dialogVisible = false;
      });
    },
    updateData() {
      updateAdPlan(this.planData).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '编辑成功',
            type: 'success',
            duration: 2000
          });
          this.getadRiskList(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: res.data.msg,
            type: 'fail',
            duration: 2000
          });
        }
        this.resetPlanData();
        this.dialogVisible = false;
      });
    },
    resetPlanData() {
      this.planData.accountName = '';
      this.planData.accountId = '';
      this.planData.planName = '';
      this.planData.planLimit = '';
      this.planData.planPrice = '';
    },
    handleDelete(row, index) {
      var that = this;
      this.$confirm('删除提示！', '确认删除吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteAdPlan({ id: row.id }).then(res => {
          if (res.data.code === 200) {
            that.$notify({
              title: 'Success',
              message: '删除成功',
              type: 'success',
              duration: 2000
            });
            this.getadRiskList(this.listQuery);
          } else {
            this.$notify({
              title: '错误',
              message: res.data.msg,
              type: 'fail',
              duration: 2000
            });
          }
        });
      });
    },
    handleFilter() {
      this.listQuery.current = 1;
      if (this.times == null) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else if (this.times.length === 0) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else {
        this.listQuery.endTime = this.times[1];
        this.listQuery.startTime = this.times[0];
      }
      this.getadRiskList(this.listQuery);
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? 'ascending' : 'descending';
    },

    selectionChange(val) {
      this.multipleIds = val;
      if (this.multipleIds) {
        let ids = [];
        this.multipleIds.forEach(item => {
          ids.push(item.id);
        });
        this.allId = ids.join(',');
      }
    }
  }
};
</script>

<style scoped>
.el-checkbox-button {
  margin-right: 50px;
  margin-bottom: 20px;
  border: 1px solid rgb(204, 201, 201);
  border-radius: 5px;
}
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}
.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(172, 176, 177);
}
.title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box {
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick {
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.mateBox {
  padding: 10px;
  border: 1px solid #999999;
  margin-bottom: 10px;
}
</style>
